<template>
  <div :class="['esign-wrapper signature', !mobileStatus ? 'mobileStatus' :'']">
    <div class="signature__content">
        <canvas ref="canvasRef" :width="width" :height="height"></canvas>
    </div>
    <div  v-show="showBtn" className="sign-btnWrap" class="signature__footer">
        <van-button size="small" @click="cancel">清除</van-button>
        <van-button type="primary" size="small" @click="save">保存</van-button>
            <!-- <span  @click="cancel" className="sign-btn">清除</span>
            <span  @click="save" className="sign-btn primary">保存</span> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted, defineEmits } from "vue";

// 判断是否为移动端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent));

const props = {
  width: mobileStatus ? 360 : 400,
  height: mobileStatus ? 560 : 600,
  lineWidth:4,
  strokeColor:'#000',
  lineCap:'round',
  lineJoin:'round',
  bgColor:'transparent',
  showBtn:true
}

const {
  width,
  height,
  lineWidth,
  strokeColor,
  lineCap,
  lineJoin,
  bgColor,
  showBtn,
  onSave,
  onClear,
  onDrawEnd
} = props;

   const canvasRef = ref(null);
    const ctxRef = ref(null);
    const emit = defineEmits(['customChange'])

   // 保存上次绘制的 坐标及偏移量
   const client = ref({
              offsetX: 0, // 偏移量
              offsetY: 0,
              endX: 0, // 坐标
              endY: 0
          })

   // 取消-清空画布
   const cancel = () => {
    // 清空当前画布上的所有绘制内容
    if(canvasRef.value) {
      const canvasCtx = canvasRef.value.getContext("2d");
      canvasCtx.clearRect(0, 0, width, height);
      
      onClear && onClear(canvasRef.value)
      emit('clear','')
    }
  }

  // 保存-将画布内容保存为图片
  const save = () => {
    // 将canvas上的内容转成blob流
    canvasRef.value.toBlob(() => {
        const dataURL = canvasRef.value.toDataURL("image/png");
        // 获取当前时间并转成字符串，用来当做文件名
        // const date = Date.now().toString()
        // // 创建一个 a 标签
        // const a = document.createElement('a')
        // // 设置 a 标签的下载文件名
        // a.download = `${date}.png`
        // // 设置 a 标签的跳转路径为 文件流地址
        // a.href = URL.createObjectURL(blob)
        // // 手动触发 a 标签的点击事件
        // a.click()
        // // 移除 a 标签
        // a.remove()

        onSave && onSave(dataURL);
        emit('onSave', {image:dataURL})
    })
  }

   // 绘制
   const draw = (event) => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 获取canvas 实例
        const canvas = canvasRef.value;
        
        const { x, y } = canvas.getBoundingClientRect();
        // 修改最后一次绘制的坐标点
        client.value.endX = pageX
        client.value.endY = pageY
        // 根据坐标点位移动添加线条
        ctxRef.value.lineTo(pageX - x, pageY - y)

        // 绘制
        ctxRef.value.stroke()
    };

   // 初始化
   const init = (event) => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
        const canvas = canvasRef.value

        const { x, y } = canvas.getBoundingClientRect();
        console.log(canvas.getBoundingClientRect(),"canvas.getBoundingClientRect()");
        client.value.offsetX = offsetX
        client.value.offsetY = offsetY
        client.value.endX = pageX
        client.value.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctxRef.value.beginPath()
        // 根据配置文件设置相应配置
        ctxRef.value.lineWidth = lineWidth
        ctxRef.value.strokeStyle = strokeColor
        ctxRef.value.lineCap = lineCap
        ctxRef.value.lineJoin = lineJoin
        // 设置画线起始点位
        ctxRef.value.moveTo(client.value.endX - x, client.value.endY - y)
        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    };
  // 结束绘制
  const closeDraw = () => {
        // 结束绘制
        ctxRef.value.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
        onDrawEnd && onDrawEnd(canvasRef.value)
    };
  const initCanvas =()=>{
       // 获取canvas 实例
       const canvas = canvasRef.value;
          // 设置宽高
          canvas.width = width;
          canvas.height = height;
          // 创建上下文
          const ctx = canvas.getContext('2d');
          ctxRef.value = ctx;
          // 设置填充背景色
          ctxRef.value.fillStyle = bgColor;
          // 绘制填充矩形
          ctxRef.value.fillRect(
              0, // x 轴起始绘制位置
              0, // y 轴起始绘制位置
              width, // 宽度
              height // 高度
          );
  }
  const  addEventListener=()=>{
     // 创建鼠标/手势按下监听器
     window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init);
      // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" : "mouseup", closeDraw);
    
  }
  const  removeEventListener=()=>{
     // 创建鼠标/手势按下监听器
     window.removeEventListener(mobileStatus ? "touchstart" : "mousedown", init);
      // 创建鼠标/手势 弹起/离开 监听器
    window.removeEventListener(mobileStatus ? "touchend" : "mouseup", closeDraw);
    
  }
  

const initEsign=()=>{
     initCanvas();
     addEventListener();
    
  }

  onMounted(() => {
    initEsign();
    document.addEventListener('resize', function(e){
        console.log(e,'addEventListener');
    })
});

onUnmounted(()=>{
  removeEventListener();
});


</script>

<style scoped lang="less">
// .esign-wrapper {
// //   border: 1px solid #ccc;
//   .sign-btnWrap {
//     margin-top: 10px;
//     .sign-btn {
//       display: inline-block;
//       border-radius: 6px;
//       padding: 4px 12px;
//       font-size: 14px;
//       background-color: #ccc;
//       margin-right: 12px;
//       margin-bottom: 10px;
//       margin-left:10px;
//       &.primary {
//         color: #fff;
//         background-color: #1677ff;
//       }
//     }
//   }
// }
.signature {
    padding: 0.11rem;
}
.mobileStatus{
    width: 400px;
    // height: 600px;
}
.signature__content {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: var(--signature-content-height);
    background-color: white;
    border: 1px dotted #dadada;
    border-radius: 0.11rem;
    overflow: hidden;
    
    margin: 0 auto;
}
// .signature__content canvas {
//     width: 100%;
//     height: 100%;
// }
.signature__content {
//   height: calc(100vh - 6rem) !important;
}
.signature__footer {
    display: flex;
    justify-content: flex-end;
}
.signature__footer .van-button {
    padding: 0 0.21rem;
    margin-top: 0.11rem;
    margin-left: 0.11rem;
}
</style>